Scratch at FreeBSD

https://gyazo.com/1b23f640e591db0ac6638e417d87e094

最初のエントリなので緊張しますが、よろしくお願いします(_O_)

はじめに

Advent Calenderの季節です!!

Xmasは、子供たちのためのイベント!!

というわけで、Scratch3サーバーを手元のFreeBSDで作って、遊んでみましょう!!

おまけ1:Scratch3をFreeBSDのChromiumから使う

いきなりおまけですが、FreeBSD ChromiumからScratchを使うための方法です。

Scratch3をFreeBSDのChromiumで使うためには、ちょっとしたコツがある。

WebGLのエラーが出て使えない場合がある。

https://gyazo.com/ec1e284756055bd85a76added4bfd358

chrome://flags から"Override software rendering list"をenableにすると動く。

https://gyazo.com/55c526825eb2ae0ca1311e288a439ec2

流石に、WebBluetoothとかはコードが無いのでムリ!!

おまけ2: Scratch 1.4をFreeBSDで使う

https://gyazo.com/a5d65b7f04586c59c507b50a9fcbfd90

さらにおまけですが、Scratch 1.4をFreeBSDで動かす方法です。

FreeBSDで動かすには、以下のPR読んでください(;-;)

おそらく、MakefileにUSES=pangoの追加でなおる?

さらに、ソースファイル scratch-1.4.0.7.src.tar.gz がどこにあるのかわからない…

Smalltalkの開発環境も出せるので、魔改造が可能。

画面左上のSCRATCHのロゴの”R”の部分をShiftキーを押しながら左クリックすると以下のメニューが開く。

https://gyazo.com/513f410475770777183afa1596685299

"turn fill screen off"を選ぶと白い背景が見えるので、ここを左クリックするとSmalltalkのメニューが出てくる。

https://gyazo.com/68139b3ce1d58a66f31556d8584c9363

open...->browserとすると、システム(not Web)ブラウザが現れるので、がんばって!!

https://gyazo.com/cc6fc4acf3438b56a41ad0934c9e2b9a

後は、hackするだけ!!

公式のScratch3サーバのみを立ち上げる

https://gyazo.com/e4aebe9f7486d0bc4f787b30c1aab8d0

さて、本題です。

Scratch3の公式サーバーはgithubでオープンソースとして公開。

作業手順の参考

事前に必要な準備

追加拡張機能の無いScratch3サーバーを準備。

code:shell

$ cd scratch-gui

$ npm install

サーバーは、デフォルトでは、port 8601で動作。

code:shell

$ npm start

独自拡張機能を追加する

https://gyazo.com/42144157efd31b09e1c5808ffaf64e95

Scratch拡張機能: Scratchを拡張するための仕組み。

これらの拡張機能を手元のサーバーで動かすことも可能。

ここでは、2つの拡張機能のインストールをやってみる。

Microbit More拡張機能を追加する

code:shell

$ ln -s mbit-more-v2 microbitMore

$ sh ./microbitMore/install-stretch3.sh

AkaDako拡張機能を追加する。

code:shell

$ sh ./xcx-g2s/scripts/stretch3-install.sh

https://akadako.com/wp-content/themes/akadako/img/top-catch-img.png

外部からのhttp接続では制限されている機能を使う

https://gyazo.com/7a4387b1d112620ac50502f7b819ffb0

基本的に、カメラやマイクを使う機能(WebRTC)や、 WebUSB 、WebBluetooth などを使う拡張機能は、localhostではない外部からはhttp経由ではなくhttps経由でしか使えない。

外部から接続する場合には、httpsが使えるように設定する必要がある。

nginxやapacheでSSLを使う設定にして、proxyでScratchサーバにつなぐ設定をする。

自己署名証明書(オレオレ証明書)を使う(今回の記事)。

外に出すサーバーだと、最低でもLet’s Encrypt使うべきだと思う。

nginxを利用する場合

自己署名証明書(オレオレ証明書)を作成する。

code:shell

$ mkdir -p /usr/local/etc/nginx/ssl

$ cd /usr/local/etc/nginx/ssl

$ sudo openssl genrsa -out server.key 2048

$ sudo openssl req -new -key server.key -out server.csr

(適切に項目を埋める)

$ sudo openssl x509 -days 3650 -req -signkey server.key -in server.csr -out server.crt

nginxの設定ファイルを調整する。

以下の例では、10443ポートでSSLを受けて、Scratchサーバーデフォルトの8601にproxyする。

code:/usr/local/etc/nginx/nginx.conf

worker_processes 1;

events {

worker_connections 1024;

}

http {

include mime.types;

default_type application/octet-stream;

sendfile on;

keepalive_timeout 65;

server {

listen 10443 ssl;

server_name localhost;

ssl_certificate /usr/local/etc/nginx/ssl/server.crt;

ssl_certificate_key /usr/local/etc/nginx/ssl/server.key;

location / {

}

}

include servers/*;

}

このサーバにアクセスした時、Chromeブラウザで警告が出た場合、以下のどちらかでアクセス可能。

"詳細情報"ボタンを押して、出てきた"<host>にアクセスする（安全ではありません）" リンクを押す

"thisisunsafe"と入力する

https://gyazo.com/ead08484e14513696a9bf35fb5c8d434

おわりに

これで、おうちでScratchサーバーを立てて、遊ぶことができるようになりました!!

クライアントとして、Chromiumから利用することも可能です!!

たまには、Scratch 1.4のことも思い出してください…

Let's play your scratch server at FreeBSD!!

どんな内容でしょうか?

楽しみですね!!

参考資料

Scratch3

Scratch 1.4 - 3

Scratch 1.4